<template>
  <div class="bodyhtml">
    <!-- 标题开始 -->
    <header>
      <p>
        <RouterLink to="/city">城市</RouterLink>
      </p>
      <a href="">
        <i class="iconfont icon-sousuo"></i>
        <p>卡姿兰大眼睛</p>
      </a>
      <p>
        <RouterLink to="/login">
          <p v-if="mainStores.token">我的</p>
          <p v-else>登录</p>
        </RouterLink>
      </p>
    </header>
    <carousellist></carousellist>
    <!-- 轮播图结束 -->
    <!-- 导航栏开始 -->
    <jdshop></jdshop>

    <div class="deal">
      <div class="time">
        <div>京东秒杀</div>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <!-- 导入秒杀商品 -->
      <secondsDeal></secondsDeal>
      <!-- 导入秒杀商品结束 -->
    </div>
    <shopList></shopList>

    <!-- 商品列表结束 -->
    <!-- 写底部导航栏 -->
    <footer>
      <van-tabbar v-model="active" active-color="#ee0a24">
        <van-tabbar-item icon="home-o" dot to="/index">home</van-tabbar-item>
        <van-tabbar-item icon="search" badge="5" to="/car">car</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/login">login</van-tabbar-item>
      </van-tabbar>
    </footer>
    <!-- 写底部导航栏结束 -->
  </div>
</template>

<script setup>
// 引入ajax里边的函数
import { carousel, categorylist } from "@/services/index";
import shopList from "@/components/shoplist.vue";
import jdshop from "@/components/jdshop.vue";
import secondsDeal from "@/components/secondsDeal.vue";
import carousellist from "@/components/carousel.vue";
// 导入pinia
import { useStores } from "@/stores/stores";
import { ref, onMounted } from "vue";
const mainStores = useStores();
let active = ref(0);
let time = ref(60 * 60 * 1000);
// 宫格的数据
let palaces = ref([
  {
    text: "京东超市",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
  },
  {
    text: "数码电器",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    text: "京东新百货",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
  },
  {
    text: "京东生鲜",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
  },
  {
    text: "京东到家",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
  },
  {
    text: "京东超市",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
  },
  {
    text: "数码电器",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    text: "京东新百货",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
  },
  {
    text: "京东生鲜",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
  },
  {
    text: "京东到家",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
  },
]);
// 将获取到的数据存入数组
let carouseldatas = ref([]);
// 异步处理
onMounted(async () => {
  let req = await carousel();
  carouseldatas.value = req.data.data;
});

// onMounted(async () => {
//   await categorylist();
// });
</script>
<style scoped>
.bodyhtml {
  background-color: #f8f9f9;
}

header {
  height: 1.28rem;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
  background-color: #c04851;
}

header>a {
  display: block;
  width: 5.6rem;
  height: 0.58rem;
  background-color: #ebebeb;
  margin-top: 0.55rem;
  margin-left: 0.2rem;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

header a>p {
  color: #999999;
  font-size: 0.28rem;
}

header>p {
  margin-left: 0.32rem;
  color: #0084ff;
  margin-top: 0.67rem;
  font-size: 0.28rem;
}

header p .iconfont {
  font-size: 0.32rem;
  margin-right: 0.09rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  overflow: hidden;
  /* background-color: #39a9ed; */
}

.imgcarousel {
  display: block;
  width: 100%;
  /* height: 100%; */
}

.deal {
  /* width: 100%; */
  height: 100%;
  margin-top: 10px;
  background-color: #fff;
}

.time {
  display: flex;
  justify-content: space-between;
}

.time>div {
  margin-left: 10px;
  margin-top: 15px;
  font-size: 15px;
  color: red;
  font-weight: 800;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: red;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: red;
}

.van-count-down {
  margin-right: 15px;
}

/* 商品列表的写法 */
.van-multi-ellipsis--l2 {
  font-size: 12px;
}

.originprice {
  font-size: 15px;
  margin-top: 5px;
  color: red;
}
</style>
